<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :before-close="handleClose"
    :show-close="true"
    :append-to-body="true"
    class="small-common-dialog-size discount-dialog"
    @close="handleClose">
    <div>
      <Title title="可抵扣税率设置" font-size="16px" style="margin: 0 0 24px"/>
      <el-form ref="discountRuleForm" :model="discountInfo" label-width="95px" label-position="left">
        <el-form-item label="供应商" prop="supplierName">
          <div>{{ supplierName }}</div>
        </el-form-item>
        <el-form-item label="可抵扣税率" prop="discount">
          <div class="discount-input">
            <el-input
              v-model="discountInfo.discount"
              :disabled="discountInfo.isAuto === 1"
              :placeholder="discountInfo.isAuto? (costPlaceholder?costPlaceholder:'根据所选供应商获取') : '请输入可抵扣税率'"
              name="discount"
              type="text"
              size="small"
              @input="deductionRateInput" >
              <span slot="suffix" style="margin-right:5px;color:#333;">%</span>
            </el-input>
            <div class="switch-talent-mode">
              <el-switch v-model="discountInfo.isAuto" :active-value="1" :inactive-value="0" class="fb-switch" @change="switchChange"/>
              <div class="text">{{ discountInfo.isAuto?'自动':'手动' }}</div>
            </div>
          </div>
        </el-form-item>
      </el-form>
      <div class="dialog-footer">
        <el-button :loading="btnLoading" :disabled="btnLoading" class="ok" type="primary" @click="handelOk">确定</el-button>
        <el-button class="cancel-btn-style" type="info" style="font-size: 16px" @click="handleClose">取消</el-button>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import Title from '@/components/Title';
import { discountEdit } from '@/api/project';
import { regNumberMax } from '@/utils/numFormat';
export default {
  components: { Title },
  props: {
    projectId: {
      type: Number,
      default: null
    },
    supplierName: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      dialogVisible: false,
      discountInfo: {
        discount: null,
        supplierId: null,
        isAuto: 1
      },
      costPlaceholder: '',
      btnLoading: false,
      originalDiscount: null
    };
  },
  methods: {
    initInfo(data) {
      if (data) {
        this.discountInfo.supplierId = data.supplierId;
        this.discountInfo.discount = data.discount;
        this.discountInfo.isAuto = data.isAuto;
        this.originalDiscount = data.originalDiscount;
      } else {
        this.discountInfo = {
          discount: null,
          supplier: null,
          isAuto: 1
        };
        this.originalDiscount = '';
        this.$emit('success');
      }
    },
    handelOk() {
      this.btnLoading = true;
      discountEdit(this.projectId, this.discountInfo).then(res => {
        this.$message.success('保存成功');
        this.btnLoading = false;
        this.dialogVisible = false;
        this.$emit('getDetail');
      }).catch(err => {
        this.dialogVisible = false;
        this.btnLoading = false;
        console.error(err);
      });
    },
    handleClose() {
      this.dialogVisible = false;
      this.initInfo();
    },
    switchChange(data) {
      if (this.discountInfo.isAuto) {
        if (this.originalDiscount || this.originalDiscount === 0) {
          this.discountInfo.discount = this.originalDiscount;
          this.costPlaceholder = '';
        } else {
          this.costPlaceholder = '没有设置可抵扣税率';
        }
      } else {
        this.costPlaceholder = '';
      }
    },
    deductionRateInput(value) {
      const str = regNumberMax(value, 100);
      this.discountInfo.discount = Number(str);
    }
  }
};
</script>
<style lang="scss">
.discount-dialog {
  .discount-input {
    display: flex;
    .el-input {
      width: unset;
    }
    .el-input__inner {
      width: 170px;
    }
    .switch-talent-mode {
      // position: absolute;
      // right: -110px;
      // top: 5px;
      margin-left: 10px;
      display: flex;
      align-items: center;
      .text {
        margin-left: 5px;
        font-size: 13px;
        color: #999;
      }
      .el-icon-warning-outline {
        color: #999;
        font-size: 13px;
        margin-left: 10px;
        cursor: pointer;
      }
    }
  }
  .dialog-footer {
    text-align: center;
  }
}
</style>
